<template>
<section>
    <div v-if="dataList && dataList.length > 0">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>基本信息</span>
                <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
            <div class="text item">姓名:{{dataList[0].userName}}</div>
            <div class="text item">性别:{{dataList[0].sex == '1' ? '男':'女'}}</div>
            <div class="text item">年龄:{{dataList[0].age}}</div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>健康信息</span>
                <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
            <el-table :data="dataList" highlight-current-row v-loading="listLoading" style="width: 100%;">
                <el-table-column v-for="(item,index) in healthItemList" :key="index" :prop="item.itemId" :label="item.itemName" :formatter="formatter1" sortable></el-table-column>
            </el-table>
        </el-card>
        <el-card class="box-card" v-for="(item,index) in caseInfoList" :key="index">
            <div slot="header" class="clearfix">
                <span>诊断记录</span>
                <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
            <el-form :model="item" label-width="80px">
                <el-form-item label="时间">
                    {{item.createTime}}
                </el-form-item>
                <el-form-item label="诊断">
                    {{item.diagnostic}}
                </el-form-item>
                <el-form-item label="医嘱" prop="doctorOrder">
                    {{item.doctorOrder}}
                </el-form-item>
                <el-form-item label="开药" v-for="(medicine,index) in item.medicineList" :key="medicine.key">
                    {{item.medicineList[index].medicineName}}
                    {{item.medicineList[index].amount}}
                    {{item.medicineList[index].remark}}
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <div v-else style="font-size: 20px; font-weight: bold;">当前无数据</div>
    <!--列表-->

</section>
</template>

<script>
import {
    mapGetters
} from "vuex";
import * as api from "@/api/api.js";
import {
    parse
} from "path";

export default {
    data() {
        return {
            defaultProps: {
                children: "children",
                label: "nodeName"
            },
            filters: {
                userName: "",
            },
            showUrl: api.showUrl,
            uploadFileUrl: api.uploadFileUrl,
            dataList: [{}],
            healthItemList: [{}],
            caseInfoList: [],
            total: 0,
            current: 1,
            size: 10,
            listLoading: false,
            sels: [], //列表选中列
            editFormVisible: false, //编辑界面是否显示
            editLoading: false,
            editFormRules: {},
            userNameReadOnly: true,
            //编辑界面数据
            editForm: { itemList: [{}] },
            patientId: ""
        };
    },
    computed: {
        ...mapGetters("user", ["getUser"])
    },
    methods: {
        formatter1: function (row, column) {
            return row.itemList ? row.itemList.map(item => item.itemId == column.property && item && item.itemValue ? parseFloat(item.itemValue).toFixed(2) + item.unit + "(" + item.itemStatus + ")" : "") : "";
        },
        formatSex: function (row, column) {
            return row.sex == "1" ? "男" : "女";
        },
        handleCurrentChange(val) {
            this.current = val;
            this.queryHealthInfoByPage();
        },
        //获取列表
        queryHealthItem() {
            api.queryHealthItem({})
                .then(res => {
                    this.healthItemList = res.returnList;
                })
                .catch(() => {});
        },
        //获取列表
        queryHealthInfoByPage() {
            let para = {
                current: 1,
                size: 9999,
                userId: this.patientId
            };
            this.listLoading = true;
            api.queryHealthInfoByPage(para)
                .then(res => {
                    this.total = res.returnPage.total;
                    this.dataList = res.returnPage.records;
                    this.dataList.forEach(data => {
                        data.itemList = this.healthItemList.map(item => {
                            let returnItem = Object.assign({ itemValue: undefined }, item);
                            data.itemList.forEach(dataItem => {
                                if (dataItem.itemId == item.itemId) {
                                    returnItem = Object.assign({}, dataItem)
                                }
                            });
                            return returnItem;
                        })
                    })
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        queryCaseInfoByPage() {
            let para = {
                current: 1,
                size: 9999,
                userId: this.patientId
            };
            api.queryCaseInfoByPage(para)
                .then(res => {
                    this.caseInfoList = res.returnPage.records;
                })
                .catch(() => {});
        },
    },
    mounted() {
        this.patientId = localStorage.getItem("userType") == '3' ? localStorage.getItem("userId") : localStorage.getItem("patientId")
        this.queryHealthItem();
        this.queryHealthInfoByPage();
        this.queryCaseInfoByPage();
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.file {
    position: relative;
    display: inline-block;
    background: #63E0EC;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    text-indent: 0;
    line-height: 30px;
    height: 30px;
}

.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 80%;
}
</style>
